<template>
  <div class="topicSubject">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
<!--            <el-select v-model="listQuery.type" style="width:150px;" @change="handleFilter">-->
<!--              <el-option-->
<!--                v-for="item in options1"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              />-->
<!--            </el-select>-->
            <el-select v-model="listQuery.property" style="width:150px;" @change="handleFilter">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="listQuery.title" style="width:150px;" @change="handleFilter">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="listQuery.keyword"
              style="width:200px"
              placeholder="关键词"
              @keyup.enter.native="handleFilter"
            />
            <el-input
              v-model="listQuery.author"
              style="width:200px"
              placeholder="作者"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
      <eltable
        :table-label="tableLabel"
        :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      >
        <el-table-column slot="first" :min-width="10" align="center" type="selection" />
        <el-table-column slot="second" :min-width="30" label="帖子" prop="post" align="center">
          <template slot-scope="scope">
            <el-button type="text">{{ scope.row.title }}</el-button><br>
            <div v-html="scope.row.content.substring(0, 50)">
              <p style="margin:0;color:#8a8a8a;font-size:14px;">{{ scope.row.content.substring(0, 50) }}</p>
            </div>
            <el-button type="text">{{ scope.row.targetName }}</el-button><br>
          </template>
        </el-table-column>
        <el-table-column slot="isPro" :min-width="15" label="属性" prop="property" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.sticky" @change="updateTopic(scope)">置顶</el-checkbox>
            <el-checkbox v-model="scope.row.nice" @change="updateTopic(scope)">加精</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column slot="isEnd" :min-width="10" label="作者" prop="author" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userName }}</el-button> <br>
            <span>{{ scope.row.createTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column slot="button" :min-width="15" label="操作" prop="manage" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="deleteTopic(scope)">删除</el-button>
          </template>
        </el-table-column>
      </eltable>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <user-dialog :visiabledialog="userdialog" :dialog-data="dialogData" @changeVisiable="userdialog = false"/>
  </div>
</template>

<script>
import UserDialog from '@/components/Dialog'
import Eltable from '@/components/Eltable'
import Pagination from '@/components/Pagination' // 分页组件
import { getTopicList, updateTopic, deleteTopic } from '@/api/subject/topic' // 数据接口
import { getUserDetail } from '@/api/operate/userDetail' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    Eltable,
    Pagination,
    UserDialog
  },
  data() {
    return {
      userdialog: false,
      dialogData: {},
      listQuery: {
        type: '',
        property: '',
        title: '',
        keyword: '',
        author: ''
      },
      total: 0,
      currentpage: 1,
      pagesize: 10,
      options1: [
        {
          label: '帖子类型',
          value: ''
        },
        {
          value: '话题',
          label: '话题'
        },
        {
          value: '问答',
          label: '问答'
        },
        {
          value: '活动',
          label: '活动'
        }
      ],
      options2: [
        {
          label: '属性',
          value: ''
        },
        {
          value: '加精',
          label: '加精'
        },
        {
          value: '置顶',
          label: '置顶'
        }
      ],
      options3: [
        {
          label: '标题',
          value: '标题'
        },
        {
          value: '内容',
          label: '内容'
        }
      ],
      tableLabel: [
        {
          label: '回复/查看', width: '10', prop: 'statistics'
        }
      ],
      tableData: [],
      listFilter: []
    }
  },
  mounted() {
    this.getCourseData()
  },
  methods: {
    handleClickDialog(scope) {
      getUserDetail(scope.row.userId).then(response => {
        this.dialogData = response.data.item
      })
      this.userdialog = true
    },
    handleSizeChange(val) {
      console.log(val)
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleFilter() {
      this.tableData = this.listFilter.filter(item => {
        if (this.listQuery.type && item.type !== this.listQuery.type) return false
        if (this.listQuery.property === '加精' && !item.nice) return false
        if (this.listQuery.property === '置顶' && !item.sticky) return false
        if (this.listQuery.title === '标题' && item.title.toLowerCase().indexOf(this.listQuery.keyword.toLowerCase()) < 0) return false
        if (this.listQuery.title === '内容' && item.content.toLowerCase().indexOf(this.listQuery.keyword.toLowerCase()) < 0) return false
        if (this.listQuery.title === '课程编号' && item.targetId.toString().toLowerCase().indexOf(this.listQuery.keyword.toLowerCase()) < 0) return false
        if (this.listQuery.title === '课程名' && item.targetName.toLowerCase().indexOf(this.listQuery.keyword.toLowerCase()) < 0) return false
        if (this.listQuery.author && item.userName.toLowerCase().indexOf(this.listQuery.author.toLowerCase()) < 0) return false
        return true
      })
      this.total = this.tableData.length
    },
    clearParams() {
      this.listQuery.type = ''
      this.listQuery.property = ''
      this.listQuery.title = ''
      this.listQuery.keyword = ''
      this.listQuery.author = ''
      this.getCourseData()
    },
    getCourseData() {
      getTopicList('course', getTenantId()).then(response => {
        response.data.items.map(item => {
          item.statistics = `${item.replyNum}/${item.hitNum}`
        })
        this.tableData = response.data.items
        this.listFilter = response.data.items
        this.total = response.data.items.length
      })
    },
    updateTopic(scope) {
      updateTopic(scope.row).then(resopnse => {
        if (resopnse.code === 200) {
          console.log('数据修改成功')
        }
      })
    },
    deleteTopic(scope) {
      this.$confirm(`永久删除这个话题吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTopic(scope.row.id).then(reponse => {
          if (reponse.code === 200) {
            this.$notify({
              title: '成功',
              message: '话题已被删除！',
              type: 'success',
              duration: 2000
            })
          }
        })
        this.listFilter.splice(scope.$index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.topicSubject {
  .allsearch {
    margin-top: 0px;
    padding: 0;
    .search-content {
      width: 100%;
    }
    .el-table td:nth-child(2) .cell{
      text-align:left
    }
  }
}
</style>
